<template>
    <div>
        <v-snackbar v-model="snackbar" :timeout="9000" top>
            <h4>{{ text }}</h4>
            <template v-slot:action="{ attrs }">
                <v-btn
                    text
                    color="pink"
                    v-bind="attrs"
                    @click="snackbar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
        <v-card class="pa-3">
            <v-row>
                <v-col cols="1"> </v-col>
                <v-col cols="10" class="pa-5">
                    <v-row>
                        <v-col cols="12" md="6" sm="6">
                            <p>
                                Nomor Order
                                <span class="red--text">* </span>
                            </p>
                            <v-text-field
                                label="Ketik Nomor Order"
                                single-line
                                solo
                            ></v-text-field>
                            <captcha-code
                                :captcha.sync="code"
                                ref="captcha"
                                :width="230"
                                :height="100"
                            >
                            </captcha-code>
                            <p>
                                Kode Keamanan
                                <span class="red--text">* </span>
                            </p>
                            <v-text-field
                                v-model="verifikasi"
                                label="Masukkan Kode Disini"
                                single-line
                                solo
                            ></v-text-field>
                            <v-btn
                                block
                                @click="checkresi"
                                color="primary"
                                style="margin-top: -10px"
                                >Cek Resi</v-btn
                            >
                        </v-col>
                        <v-col cols="12" md="6" sm="6">
                            <h3 class="pa-3">Informasi Resi</h3>
                            <v-divider></v-divider>
                            <template>
                                <v-container style="max-width: 600px">
                                    <v-timeline dense clipped>
                                        <v-timeline-item class="mb-4" hide-dot>
                                            <span>TODAY</span>
                                        </v-timeline-item>

                                        <v-timeline-item
                                            class="mb-3"
                                            color="grey"
                                            icon-color="grey lighten-2"
                                            small
                                        >
                                            <v-layout justify-space-between>
                                                <v-flex xs7
                                                    >This order was
                                                    archived.</v-flex
                                                >
                                                <v-flex xs5 text-xs-right
                                                    >15:26
                                                </v-flex>
                                            </v-layout>
                                        </v-timeline-item>

                                        <v-timeline-item class="mb-3" small>
                                            <v-layout justify-space-between>
                                                <v-flex xs7>
                                                    <v-chip
                                                        class="white--text ml-0"
                                                        color="purple"
                                                        label
                                                        small
                                                    >
                                                        APP
                                                    </v-chip>
                                                    Digital Downloads fulfilled
                                                    1 item.
                                                </v-flex>
                                                <v-flex xs5 text-xs-right
                                                    >15:25
                                                </v-flex>
                                            </v-layout>
                                        </v-timeline-item>

                                        <v-timeline-item
                                            class="mb-3"
                                            color="grey"
                                            small
                                        >
                                            <v-layout justify-space-between>
                                                <v-flex xs7>
                                                    Order confirmation email was
                                                    sent to John Leider
                                                    (john@vuetifyjs.com).
                                                </v-flex>
                                                <v-flex xs5 text-xs-right
                                                    >15:25
                                                </v-flex>
                                            </v-layout>
                                        </v-timeline-item>

                                        <v-timeline-item
                                            class="mb-3"
                                            color="grey"
                                            small
                                        >
                                            <v-layout justify-space-between>
                                                <v-flex xs7>
                                                    A $15.00 USD payment was
                                                    processed on PayPal Express
                                                    Checkout
                                                </v-flex>
                                                <v-flex xs5 text-xs-right
                                                    >15:25
                                                </v-flex>
                                            </v-layout>
                                        </v-timeline-item>

                                        <v-timeline-item color="grey" small>
                                            <v-layout justify-space-between>
                                                <v-flex xs7>
                                                    John Leider placed this
                                                    order on Online Store
                                                    (checkout #1937432132572).
                                                </v-flex>
                                                <v-flex xs5 text-xs-right
                                                    >15:25
                                                </v-flex>
                                            </v-layout>
                                        </v-timeline-item>
                                    </v-timeline>
                                </v-container>
                            </template>
                        </v-col>
                    </v-row>
                </v-col>
                <v-col cols="1"> </v-col>
            </v-row>
        </v-card>
    </div>
</template>
<script>
import CaptchaCode from "vue-captcha-code";
export default {
    components: {
        CaptchaCode,
    },
    data() {
        return {
            verifikasi: "",
            code: "",
            events: [],
            input: null,
            nonce: 0,
            snackbar: false,
            text: "",
        };
    },

    methods: {
        handleClick() {
            this.$refs.captcha.refreshCaptcha();
        },
        handleChange(code) {
            console.log("code:", code);
        },
        checkresi() {
            if (this.code == this.verifikasi) {
                this.text = "Verifikasi Berhasil";
                this.snackbar = true;
                return;
            } else {
                this.text = "Verifikasi Gagal";
                this.snackbar = true;
                return;
            }
        },
    },
};
</script>
